包管理工具 #

前言 #

常见的包管理工具有 npm、pnpm、cnpm、npx、yarn

先说结论：推荐使用 pnpm

• 开源社区的宠儿
• 国内的 Vue / Vite 团队很多都切换到pnpm

(一) npm 工具 #

1. npm 是什么 #

   • 前端通用的模块都存放在网站 https://www.npmjs.com/, 你需要用到nodejs模块在这个网站都能找到
   • npm 是 nodejs 模块 (一般称为包,一个模块就是一个包) 管理工具
   • 安装nodejs的时候会自动安装npm工具

2. 初始化 package.json #

   npm init   // 或
   npm init -y
   

   // package.json 版本号说明
   {
       "dependencies": {
           "foo": "1.0.0 - 2.9999.9999",   
           "bar": ">=1.0.2 <2.1.2", //必须大于等于1.0.2版本且小于2.1.2版本
           "baz": ">1.0.2 <=2.3.4", //必须大于1.0.2版本且小于等于2.3.4版本
           "boo": "2.3.1", //必须匹配这个版本
           "boo": "~2.3.1", //约等于2.3.1，只更新最小版本，相当于2.3.X，即>=2.3.1 <2.4.0
           "thr": "2.3.x",
           "boo": "^2.3.1", //与2.3.1版本兼容，相当于2.X.X, 即>=2.3.1 < 3.0.0,不改变大版本号。
           "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
            //在版本上指定一个压缩包的url，当执行npm install 时这个压缩包会被下载并安装到本地。
           "asd": "http://asdf.com/asdf.tar.gz", 
           "til": "~1.2",   
           "elf": "~1.2.3", 
           "two": "2.x",
           "lat": "latest",              安装最新版本
           "dyl": "file:../dyl",         使用本地路径
            // 使用git URL加commit-ish
           "adf": "git://github.com/user/project.git#commit-ish"    
       }
   } 
   

3. 安装一个 nodejs 模块 #

   // 以jquery和axios为例   
   npm i jquery --save  /// 记录在 dependencies
   npm i axios --save-dev  //  记录devDependencies
   npm i serve -node    // 全局安装,serve是一个封装了nodejs服务的模块
   npm i // 当我们把node_modules删掉,使用npm i 可以把所有依赖都安装回来
   npm inpm i --force // 选项通常用于强制包管理器执行某些操作，即使这可能会导致一些不期望的副作用
   npm i --legacy-peer-deps // 忽略对等依赖安装
   npm i xxx --location=global // 全局安装某个模块
   

   // dependency和devDependencies的区别

   (1) 使用 --save-dev 安装的 插件，被写入到 devDependencies 域里面去，而使用 --save 安装的插件，则是被写入到 dependencies 区块里面去。
   (2) 官方解释
   “dependency”:These packages are required by your application in production.（这些软件包是生产中的应用程序需要的）
   “devDependencies”: These packages are only needed for development and testing.（这些包仅用于开发和测试） 
   (3) package.json 文件里面的 devDependencies 和 dependencies 的区别
   devDependencies  里面的插件只用于开发环境，不用于生产环境,而dependencies是需要发布到生产环境的。比如我们写一个项目要依赖于jQuery，没有这个包的依赖运行就会报错，这时候就把这个依赖写入dependencies；而我们使用的一些构建工具比如glup、webpack这些只是在开发中使用的包，上线以后就和他们没关系了，所以将它写入devDependencies。
   

4. 更新 nodejs 模块 #

   npm update xxx
   

5. 删除 nodejs 模块 #

   npm uninstall xxx
   

6. 运行指令 (运行package.json里script里的指令) #

   npm run xxx
   

7. npm设置淘宝镜像 #

   • 输入以下命令

     npm config set registry https://registry.npm.taobao.org  
     

   • 验证

     npm config get registry
     

     如果返回https://registry.npm.taobao.org，说明镜像配置成功。

(二) pnpm工具 #

​ pnpm 全称 performant npm，意思为 高性能的 npm。pnpm 由 npm/yarn 衍生而来，解决了 npm/yarn 内部潜在的 bug，极大的优化了性能，扩展了使用场景。被誉为 最先进的包管理工具。

1. 安装pnpm

   npm install -g pnpm@7
   

   pnpm兼容性

   以下是各版本 pnpm 与各版本 Node.js 之间的兼容性表格。

   Node.js	pnpm 7	pnpm 8	pnpm 9
   Node.js 12	❌	❌	❌
   Node.js 14	✔️	❌	❌
   Node.js 16	✔️	✔️	❌
   Node.js 18	✔️	✔️	✔️
   Node.js 20	✔️	✔️	✔️

2. pnpm setup #自动设置环境变量

3. pnpm config set global-bin-dir "D:\nodejs" # pnpm全局bin路径

4. 安装模块

   pnpm add serve -g 全局安装
   pnpm add serve 局部安装
   

5. 卸载模块

   1.pnpm ls -g 列出全局安装的包
   2.pnpm rm -g json-server 删除全局模块
   

6. 查看源 pnpm get registry

7. [设置源pnpm set registry https://registry.npmmirror.com

   pnpm设置国内源

8. 查看某个模块可安装版本pnpm view json-server versions